<template>
  <div class="course">
    <van-nav-bar title="大三下学期" @click-right="onClickRight">
      <template #right>
        <van-icon name="setting-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 通知栏 -->
    <van-notice-bar left-icon="volume-o" :text="notice"></van-notice-bar>

    <!-- 课程表 -->
    <div class="courseDiv">
      <table class="table">
        <thead>
          <tr>
            <th style="font-size: 16px; width: 10%">课时</th>
            <th
              style="font-size: 10px"
              v-for="(item, index) in dateList"
              :key="index"
            >
              <p>{{ item.week }}</p>
              <p style="font-size: 10px">{{ item.date }}</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(i, index) in times" :key="index">
            <td style="font-size: 6px">
              <p>{{ index + 1 }}</p>
              <p style="">{{ i.begin }}</p>
              <p>{{ i.end }}</p>
            </td>
            <td v-for="(item, index) in courses[index]" :key="index">
              {{ item }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 设置课程 -->
    <div v-if="show" class="setCourse">
      <h2>设置课程</h2>

      <van-picker
        show-toolbar
        title="选择时间"
        :columns="columns"
        ref="picker"
        confirm-button-text=" "
        cancel-button-text=" "
      />
      <br />
      <van-field
        v-model="beginTime"
        label="开始时间"
        placeholder="请输入开始时间"
      />
      <van-field
        v-model="endTime"
        label="结束时间"
        placeholder="请输入结束时间"
      />
      <van-field
        v-model="courseText"
        label="课程名称"
        placeholder="请输入课程名称"
      />

      <div class="setButton">
        <van-button color="#999999" plain @click="cancle">取消</van-button
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <van-button color="#cc0000" plain @click="conserve">确定</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dateList: [
        {
          id: "1",
          date: "05/09",
          week: "周一",
        },
        {
          id: "2",
          date: "05/10",
          week: "周二",
        },
        {
          id: "3",
          date: "05/11",
          week: "周三",
        },
        {
          id: "4",
          date: "05/12",
          week: "周四",
        },
        {
          id: "5",
          date: "05/13",
          week: "周五",
        },
        {
          id: "6",
          date: "05/14",
          week: "周六",
        },
        {
          id: "7",
          date: "05/15",
          week: "周日",
        },
      ],
      courses: [
        ["", "", "框架开发707", "", "", "", ""],
        ["", "", "框架开发707", "", "", "", ""],
        ["", "", "框架开发707", "", "移动开发414", "", ""],
        ["", "", "框架开发707", "", "移动开发414", "", ""],
        ["", "", "", "", "", "", ""],
        ["", "", "", "", "", "", ""],
        ["", "", "", "", "移动开发714", "", ""],
        ["", "", "", "", "移动开发714", "", ""],
      ],
      times: [
        { begin: "8:20", end: "9:00" },
        { begin: "9:05", end: "9:45" },
        { begin: "10:05", end: "10:45" },
        { begin: "10:50", end: "11:30" },
        { begin: "13:30", end: "14:10" },
        { begin: "14:15", end: "14:55" },
        { begin: "15:15", end: "15:55" },
        { begin: "16:00", end: "16:40" },
      ],
      show: false, //设置课程div的显示控制
      columns: [
        // 选择时间第一列
        {
          values: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          defaultIndex: 1,
        },
        // 选择时间第二列
        {
          values: [
            "第一节",
            "第二节",
            "第三节",
            "第四节",
            "第五节",
            "第六节",
            "第七节",
            "第八节",
          ],
          defaultIndex: 1,
        },
      ],
      beginTime: "", //设置课程开始时间
      endTime: "", //设置课程结束时间
      courseText: "", //设置课程
      notice: "移动开发实验课教室换到706教室", //通知栏
    };
  },

  methods: {
    onClickRight: function () {
      this.show = !this.show;
    },
    conserve: function () {
      const index = this.$refs.picker.getIndexes();
      // console.log(index);
      if (!this.beginTime || !this.endTime || !this.courseText) {
        this.$dialog.alert({
          message: "请输入完整信息",
        });
        return;
      }
      this.times[index[1]].begin = this.beginTime;
      this.times[index[1]].end = this.endTime;
      this.courses[index[1]][index[0]] = this.courseText;
      this.show = false;
    },
    cancle: function () {
      this.beginTime = "";
      this.endTime = "";
      this.courseText = "";
      this.show = false;
    },
  },
};
</script>
<style scoped="less">
.course {
  height: 100%;
  width: 100%;
  padding-bottom: 5%;
}
table {
  border: 1px solid #f3f3f3;
  border-collapse: collapse;
  text-align: center;
}

tr,
th,
td {
  width: 150px;
  height: 40px;
  font-size: 12px;
  text-align: center;
  border: 1px solid #f3f3f3;
}
.courseDiv {
  margin-top: 30px;
}
.setCourse {
  position: absolute;
  top: 10%;
  background-color: #aaaaaa;
  opacity: 0.95;
  width: 100%;
  height: 100%;
}
.setButton {
  text-align: center;
  margin-top: 5%;
}
</style>